<template>
    <el-card class="box-card">
    <div slot="header" class="clearfix header">
        <el-tabs v-model="activeName" @tab-click="handleClick" class="tabs">
        <el-tab-pane label="销售额" name="销售额">

        </el-tab-pane>
        <el-tab-pane label="访问量" name="访问量">

        </el-tab-pane>
        </el-tabs>
        <div class="right">
            <span @click="setTime(1)">今日</span>
            <span @click="setTime(2)">本周</span>
            <span @click="setTime(3)">本月</span>
            <span @click="setTime(4)">本年</span>
            <div class="block">
                <el-date-picker
                    class="data"
                    size = 'mini'
                    v-model="value1"
                    type="daterange"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="yyyy-MM-dd"
                    >
                </el-date-picker>
            </div>

    </div>
    </div>
    <el-row :gutter="10">
      <el-col :span="16">
        <div ref="main" style="width:800px;height:400px"></div>
      </el-col>
      <el-col :span="8">
       <div style="width:400px;height:400px">
          <div>
            <h3 style="text-align:center;margin-left:70px;">门店{{activeName}}排名</h3>
          </div>
        <ul style="margin-left:20px;margin-top:10px;">
          <li v-for="data,index in dummy" v-show="index < 3" :key="data.value"><el-card style="margin-top:30px" shadow="hover"><span class="listNumber">{{index + 1}}</span><i>{{data.name}}</i><b style="float:right" class="kanvausa">{{data.value}}</b></el-card></li>
          <li v-for="data,index in dummy" v-show="index >= 3" :key="index"><el-card style="margin-top:30px" shadow="hover"><span class="infoNumber">{{index + 1}}</span><i>{{data.name}}</i><b style="float:right" class="kanvausa">{{data.value}}</b></el-card></li>
        </ul>
       </div>
      </el-col>
    </el-row>
    
</el-card>

    
</template>

<script>
import dayjs from "dayjs"
import {mapState} from 'vuex'
export default {
    name:'Sale',
     data() {
      return {
        activeName: '销售额',
        value1: '',
        setData:{
            salesData:[],
            visitsData:[],
        },
        listDat:{
            salesData:[{name:'双子阿尔法星',value:2344324},{name:'云霄星',value:345533},{name:'斯科尔星',value:5566},{name:'拓梯星',value:44},{name:'赫尔卡星',value:12}],
            visitsData:[{name:'斯科尔星',value:11112},{name:'诺可撒斯星',value:2211},{name:'海兹尔星',value:3223},{name:'索伦森星',value:34},{name:'艾迪星',value:22}]
        },
        dummy:[{name:'双子阿尔法星',value:2344324},{name:'云霄星',value:345533},{name:'斯科尔星',value:5566},{name:'拓梯星',value:44},{name:'赫尔卡星',value:12}],
        dummyfriend:[]
      };
    },
    methods: {
      handleClick(tab) {
        if(tab.label == "销售额"&&this.data){
          this.setData.salesData = this.data.orderFullYear
          this.setData.visitsData = this.data.userFullYearAxis
        }else if(this.data){
          this.setData.salesData = this.data.userFullYear
          this.setData.visitsData = this.data.userFullYearAxis
        } 
        this.getListPhoto()  
      },
      getListPhoto(){
             this.$echarts.init(this.$refs.main).setOption(
            {
              title:{
                text:this.activeName + '趋势'
              },
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: 'shadow'
                }
              },
              grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
              },
              xAxis: [
                {
                  type: 'category',
                  data: this.setData.visitsData,
                  axisTick: {
                    alignWithLabel: true
                  }
                }
              ],
              yAxis: [
                {
                  type: 'value'
                }
              ],
              series: [
                {
                  name: 'Direct',
                  type: 'bar',
                  barWidth: '30',
                  data: this.setData.salesData,
                  itemStyle: {
            normal: {
　　　　　　　　//这里是重点
                color: function(params) {
                	//注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                    var colorList = ['#4169E1','#4169E1','#4169E1','#4169E1','#4169E1','#4169E1','#4169E1','#4169E1','#4169E1','#4169E1','#4169E1','#4169E1'];
                    return colorList[params.dataIndex]
                          }
                      }
                  }
                }
              ]
            }
      )
      },
      setTime(value){
        let arr = []
        switch(value){
          case 1:
            arr[0] = dayjs().format('YYYY-MM-DD')
            arr[1] = arr[0]
            break
          case 2:
            arr[0] = dayjs().day(1).format('YYYY-MM-DD')
            arr[1] = dayjs().day(7).format('YYYY-MM-DD')
            break
          case 3:
            arr[0] = dayjs().startOf('month').format('YYYY-MM-DD')
            arr[1] = dayjs().endOf('month').format('YYYY-MM-DD') 
            break
          case 4:
            arr[0] = dayjs().startOf('year').format('YYYY-MM-DD')
            arr[1] = dayjs().endOf('year').format('YYYY-MM-DD') 
            break
        }
        this.value1 = arr
      }
    },
    mounted(){
        this.handleClick({label:'销售额'})  
      },
    computed:{
        ...mapState('mockstore',['data'])
    },
    watch:{
      data:{
        deep:true,
        handler(){
          this.handleClick({label:'销售额'})  
        }
      }
    }
}

</script>

<style scoped>
    i{
      font-style: normal;
    }
    .kanvausa{
      margin-right: 30px;
    }
    .infoNumber{
      display: block;
      float: left;
      width: 20px;
      height: 20px;
      line-height: 20px;
      text-align: center;
    }
    .listNumber{
      display: block;
      float: left;
      width: 20px;
      height: 20px;
      background-color: black;
      color: white;
      text-align: center;
      border-radius: 50% ;
      line-height: 20px;
      font-style: normal;
    }
    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }
    .clearfix{
        display: flex;
        justify-content: space-between;
        position: relative;
    }
    >>>.el-card__header{
        border: none;
    }
    .tabs{
      width:100%
    }
    .right{
      position: absolute;
      right: 0;
      top: 0;
    }
    .block{
      float: right;
    }
    span{
      line-height: 40px;
      margin: 0 20px;
    }
    .data{
      width: 200px;
      margin: 0 20px;
    }
    ul{
      list-style: none;
      width: 100%;
      height: 300px;
    }
    ul > li{
      height: 12%;
    }
</style>